<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="description" content="北京儿童医院孤独症干预临床试验，通过BF839益生菌与轻FMT混合治疗，科学方法助力孤独症改善。让孩子早日获得宝贵的治疗机会">
    <meta name="keywords" content="孤独症干预, 二代菌，二代益生菌，孤独症, BF839, 图腾益星，脆弱拟杆菌，FMT, 粪菌移植，临床试验, 北京儿童医院">
    <meta name="custom-image" content="https://totemlife.cn/apps/public/space-journey/portal.jpg">
    <title>穿越星海，拥抱曙光</title>
    <link href="/apps/css/bootstrap.min.css" rel="stylesheet">
    <link href="/apps/css/fontawesome-free-6.4.0-web/css/all.css" rel="stylesheet">
    <link href="/apps/public/space-journey/css/game.css" rel="stylesheet">
    <script src="/apps/js/baidu-tongji-mtx.js"></script>
</head>
<body>
    <div id="app">
        <!-- 场景一：上传知情同意书 -->
        <div id="consentView" class="game-view {{#if showConsent}}active{{/if}}">
            <div class="cockpit-container">

                <!-- 闪烁星星背景 -->
                <div class="twinkling-stars-container">
                    {{#times 8}}
                    <div class="star small"></div>
                    {{/times}}
                    {{#times 4}}
                    <div class="star medium"></div>
                    {{/times}}
                    {{#times 2}}
                    <div class="star large"></div>
                    {{/times}}
                </div>

                <div class="cockpit-header">
                    <a href="https://totemlife.cn/apps/asd/recruit/bch2501" style="text-decoration: none;">
                        <h1>跃迁星际计划 <i class="fas fa-link"></i></h1>
                    </a>
                    <div class="subtitle" id="consent-tip">
                        请上传通行证并提交补给信息
                    </div>
                </div>
                <div class="consent-container">
                    <div class="consent-upload">

                        <div class="section-header">
                            <span style="color:#9BB7D4" class="small">通行证（知情同意书签名页）</span>
                            <div class="help-icon" onclick="showHelpTip('知情同意书签署：每周二三上午<br>北京儿童医院尹梦雅医生儿童发育门诊', 'consent-tip');">
                                <i class="fa fa-info-circle"></i>
                            </div>
                        </div>

                        <div class="file-upload-container">
                            <div class="file-upload-area" id="uploadArea">
                                <i class="fas fa-cloud-upload-alt upload-icon"></i>
                                <div class="upload-text">点击或拖拽通行证到此上传</div>
                                <div class="upload-hint">支持 JPG、PNG 格式图片</div>
                                <input type="file" id="consentFileInput" accept="image/*" multiple onchange="handleFileUpload()">
                                <div class="upload-progress-overlay">
                                    <div class="upload-progress-bar" style="width: 0%"></div>
                                </div>
                            </div>
                            <div class="uploaded-files-grid" id="uploadedFilesGrid">
                                <!-- 上传的文件缩略图将在这里显示 -->
                            </div>
                        </div>


                        <!-- 添加补给地址表单 -->
                        <div>

                            <!-- 受试者基本信息 -->
                            <div class="row g-2 mb-3">
                                <div class="col-6">
                                    <input type="text" class="form-control" id="subjectName" placeholder="受试人姓名" required>
                                </div>
                                <div class="col-3">
                                    <input type="number" class="form-control" id="subjectAge" min="0" max="18" placeholder="年龄" required>
                                </div>
                                <div class="col-3">
                                    <select class="form-select" id="subjectGender" required>
                                        <option value="" class="placeholder-option">性别</option>
                                        <option value="男">男</option>
                                        <option value="女">女</option>
                                    </select>
                                </div>
                            </div>
                            <!-- 收件人信息 -->
                            <div class="row g-2 mb-3">
                                <div class="col-6">
                                    <input type="text" id="recipientName" class="form-control" placeholder="收件人姓名" required>
                                </div>
                                <div class="col-6">
                                    <input type="tel" id="recipientPhone" class="form-control" placeholder="收件人手机" required>
                                </div>
                            </div>
                            <div class="form-group mb-3">
                                <textarea id="recipientAddress" class="form-control" rows="2" placeholder="物资补给地址（请包含省/市/区）" required></textarea>
                            </div>
                        </div>

                        <div class="button-container">
                            <button class="help-btn" onclick="uploadConsent()" id="uploadConsentBtn" disabled>
                                <i class="fas fa-paper-plane"></i> 发送通行证至指挥基地
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 场景二：添加研究助理 -->
        <div id="welcomeView" class="game-view {{#if showWelcome}}active{{/if}}">
            <div class="night">
                <div class="shooting-stars">
                    {{#times 120}}
                    <div class="shooting-star"></div>
                    {{/times}}
                </div>
                <div class="space-station">
                    <h1>量子频道#{{userId}}</h1>
                    <p class="welcome-message" id="welcome-tip">指挥基地：导航员正在<br>根据通行证书为您分配舰队编组</p>
                    <div class="contact-assistant">
                        <div class="qr-code">
                            <img src="{{assistantQR}}" alt="研究助理二维码">
                        </div>
                        <p class="contact-tip" onclick="showHelpTip('长按二维码或微信扫码添加项目助理','welcome-tip');">
                            联系项目助理优先办理 <i class="fa fa-question-circle" style="color:#88b04b;"></i>
                        </p>
                        <button class="help-btn" onclick="confirmTrialGroup()">
                            编组确认完成，进入试验
                        </button>
                    </div>
                </div>
            </div>
            <div class="bottom-link">
                <a href="https://totemlife.cn/apps/asd/recruit/bch2501" style="color:#9BB7DA; text-decoration: none;">
                    关于星际跃迁 <i class="fa fa-external-link-alt" style="color:#9BB7DA;"></i>
                </a>
            </div>
        </div>

        <!-- 场景三：主控台界面 -->
        <div id="cockpitView" class="game-view {{#if showCockpit}}active{{/if}}">
            <div class="cockpit-container">
                <!-- 流星背景 -->
                <div class="shooting-stars-container">
                    <div class="shooting-star"></div>
                </div>

                <!-- 闪烁星星背景 -->
                <div class="twinkling-stars-container">
                    {{#times 40}}
                    <div class="star small"></div>
                    {{/times}}
                    {{#times 35}}
                    <div class="star medium"></div>
                    {{/times}}
                    {{#times 25}}
                    <div class="star large"></div>
                    {{/times}}
                </div>

                <!-- 主控台标题 -->
                <div class="cockpit-header">
                    <h1><i class="fas fa-rocket"></i> 试验主控台</h1>
                    <div class="subtitle">
                        穿越星海，拥抱曙光
                        <i class="fas fa-info-circle info-icon" onclick="game.showUserInfo()"></i>
                    </div>
                </div>

                <!-- 进度信息 -->
                <div class="progress-info">
                    <div class="journey-progress-bar">
                        <div class="progress-text">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                        <div class="progress">
                            <div class="progress-bar bg-success" role="progressbar" style="width: 0%" 
                                aria-valuenow="0" aria-valuemin="0" aria-valuemax="90"></div>
                        </div>
                        <div class="progress-stats">
                            <span style='color:#88b04b;'></span>
                            <span style='color:#007bff;'></span>
                            <span style='color:#ffc107;'></span>
                        </div>
                    </div>
                </div>

                <!-- 主控台提示信息 -->
                <div class="cockpit-message">
                    <div class="message-content" id="cockpitMessage">
                        <p>欢迎登舰，请点击开始试验启动星际跃迁</p>
                    </div>
                </div>

                <!-- 控制按钮 -->
                <div class="control-buttons">
                    <button class="cockpit-btn launch-btn disabled" onclick="handleLaunch()" disabled>
                        <i class="fas fa-rocket"></i> 开始试验
                    </button>

                    <button class="cockpit-btn call-btn" onclick="callBase()">
                        <i class="fas fa-headset"></i> 联系助理
                    </button>

                    <button class="cockpit-btn checkin-btn disabled" onclick="goToDiary()" disabled>
                        <i class="fas fa-calendar-check"></i> 日志打卡
                    </button>

                    <button class="cockpit-btn followup-btn disabled" onclick="goToFollowUp()" disabled>
                        <i class="fas fa-clipboard-list"></i> 巡检随访
                    </button>

                    <button class="cockpit-btn scales-btn" onclick="window.location.href='/apps/scales/scales-dashboard?returnUrl=/apps/space-journey/game&returnLabel=回主控台'">
                        <i class="fas fa-chart-bar"></i> 量表工具
                    </button>

                    <button class="cockpit-btn disabled" onclick="window.location.href='/apps/channels'" disabled>
                        <i class="fas fa-comment-dots"></i> 星语频道
                    </button>
                </div>
            </div>
            <div class="bottom-link">
                <a href="https://totemlife.cn/apps/asd/recruit/bch2501" style="color:#9BB7DA; text-decoration: none;">
                    关于星际跃迁 <i class="fa fa-external-link-alt" style="color:#9BB7DA;"></i>
                </a>
            </div>
        </div>

        <!-- 随访视图 -->
        <div id="followupView" class="game-view">
            <div class="cockpit-container">
                <!-- 流星背景 -->
                <div class="shooting-stars-container">
                    <div class="shooting-star"></div>
                </div>

                <!-- 闪烁星星背景 -->
                <div class="twinkling-stars-container">
                    {{#times 40}}
                    <div class="star small"></div>
                    {{/times}}
                    {{#times 35}}
                    <div class="star medium"></div>
                    {{/times}}
                    {{#times 25}}
                    <div class="star large"></div>
                    {{/times}}
                </div>

                <!-- 随访标题 -->
                <div class="cockpit-header">
                    <h1>星际巡检随访</h1>
                    <div class="subtitle">定期巡检，确保您的星际旅程安全</div>
                </div>

                <!-- 随访内容 -->
                <div class="diary-container">
                    <div id="followup-list">
                            <div class="text-center">
                                <i class="fas fa-spinner fa-spin"></i> 正在加载随访记录...
                            </div>
                        </div>
                </div>

                <!-- 返回主控台悬浮按钮 -->
                <button class="back-to-cockpit-btn floating" onclick="window.backToCockpit()">
                    <i class="fas fa-arrow-left"></i> 返回主控台
                </button>
            </div>
        </div>

        <!-- 航程日记视图 -->
        <div id="diaryView" class="game-view">
            <div class="cockpit-container">
                <!-- 流星背景 -->
                <div class="shooting-stars-container">
                    <div class="shooting-star"></div>
                </div>

                <!-- 闪烁星星背景 -->
                <div class="twinkling-stars-container">
                    {{#times 40}}
                    <div class="star small"></div>
                    {{/times}}
                    {{#times 35}}
                    <div class="star medium"></div>
                    {{/times}}
                    {{#times 25}}
                    <div class="star large"></div>
                    {{/times}}
                </div>

                <!-- 日记标题 -->
                <div class="cockpit-header">
                    <h1>航程日志台</h1>
                    <div class="subtitle">所有的成长，都藏在被丈量过的时光里</div>
                </div>

                <!-- 日记列表 -->
                <div class="diary-container">
                    <!-- 今日日记卡片 -->
                    <div class="diary-card">
                        <div class="diary-header">
                            <h3>今日航程</h3>
                        </div>
                        <div class="diary-content" id="todayDiaryContent">
                            <!-- 未创建日记时显示 -->
                            <div class="empty-diary-prompt">
                                <p>日志还未创建</p>
                                <button class="create-diary-btn" onclick="editDiary()">
                                    <i class="fas fa-edit"></i> 开始记录
                                </button>
                            </div>
                            <!-- 已创建日记时显示 -->
                            <div class="diary-summary" style="display: none;" onclick="editDiary()">
                                <!-- 日记摘要内容将通过JavaScript动态填充 -->
                            </div>
                        </div>
                    </div>

                    <!-- 历史日记标题 -->
                    <h3 class="history-title">历史记录</h3>

                    <!-- 历史日记列表 -->
                    <div id="diaryList">
                        <!-- 历史记录将通过JavaScript动态加载 -->
                    </div>
                    <div class="load-more-container" style="text-align: center; margin-top: 20px; display: none;">
                        <button class="load-more-btn" onclick="loadMoreDiaries()">
                            <i class="fas fa-sync"></i> 加载更多
                        </button>
                    </div>
                </div>

                <!-- 返回主控台悬浮按钮 -->
                <button class="back-to-cockpit-btn floating" onclick="window.backToCockpit()">
                    <i class="fas fa-arrow-left"></i> 返回主控台
                </button>
            </div>
            <div class="bottom-link">
                <a href="https://totemlife.cn/apps/asd/recruit/bch2501" style="color:#9BB7DA; text-decoration: none;">
                    关于星际跃迁 <i class="fa fa-external-link-alt" style="color:#9BB7DA;"></i>
                </a>
            </div>
        </div>

    </div>

    <!-- 启动引擎模态框 -->
    <div class="modal fade" id="launchModal" tabindex="-1" aria-labelledby="launchModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="launchModalLabel">启动星际引擎</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="launch-content">
                        <p>请确认从今天开始星际跃迁吗？</p>
                        <div class="form-group">
                            <input type="date" id="startDate" class="form-control" readonly>
                        </div>
                        <p class="launch-note">启程日期一经设定无法更改，启程后须按时完成旅程任务</p>
                    </div>
                    <div class="exit-confirmation" style="display: none;">
                        <p>您确定要结束当前的星际旅程吗？</p>
                        <p class="exit-warning">警告：结束旅程后，您的所有进度将被重置，包括能量包数量和已完成的任务。此操作无法撤销。</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary launch-confirm-btn" onclick="confirmLaunch()">确认出发</button>
                    <button type="button" class="btn btn-danger exit-confirm-btn" onclick="confirmExit()" style="display: none;">确认结束旅程</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 通用提示模态框 -->
    <div class="modal fade" id="gameNoticeModal">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 通报日期模态框 -->
    <div class="modal fade" id="reportDaysModal">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">总部通报日期</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="report-days-list">
                        <!-- 通报日期列表将由JavaScript动态填充 -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 中止确认模态框 -->
    <div class="modal fade" id="abortModal" tabindex="-1" aria-labelledby="abortModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="abortModalLabel">确认中止跃迁</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>您确定要中止当前的星际跃迁吗？</p>
                    <p>中止后您需要重新联系导航员制定跃迁计划。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" onclick="abortJourney()">确认中止</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 日记编辑模态框 -->
    <div class="modal fade" id="diaryEditModal" tabindex="-1" aria-labelledby="diaryEditModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="diaryEditModalLabel">记录星际航程</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="diaryForm">
                        <!-- 基本信息部分 -->
                        <div class="basic-info">
                            <h6>基本信息</h6>

                            <!-- 试验组用户必填部分 -->
                            <div class="trial-group-section" style="display: none;">
                                <div class="form-group mb-3">
                                    <label>早餐后服用益星</label>
                                    <div class="btn-group" role="group">
                                        <input type="radio" class="btn-check" name="morning_dose" id="morning_dose_yes" value="已服" required>
                                        <label class="btn btn-outline-success" for="morning_dose_yes">已服</label>
                                        <input type="radio" class="btn-check" name="morning_dose" id="morning_dose_no" value="漏服">
                                        <label class="btn btn-outline-danger" for="morning_dose_no">漏服</label>
                                    </div>
                                    <div class="missed-reason mt-2" style="display: none;">
                                        <label>漏服原因</label>
                                        <select class="form-select" name="morning_missed_reason">
                                            <option value="外出">外出</option>
                                            <option value="拒服">拒服</option>
                                            <option value="其它">其它</option>
                                        </select>
                                        <input type="text" class="form-control mt-2" name="morning_missed_other" placeholder="请注明其它原因" style="display: none;">
                                    </div>
                                </div>

                                <div class="form-group mb-3">
                                    <label>晚餐后服用益星</label>
                                    <div class="btn-group" role="group">
                                        <input type="radio" class="btn-check" name="evening_dose" id="evening_dose_yes" value="已服" required>
                                        <label class="btn btn-outline-success" for="evening_dose_yes">已服</label>
                                        <input type="radio" class="btn-check" name="evening_dose" id="evening_dose_no" value="漏服">
                                        <label class="btn btn-outline-danger" for="evening_dose_no">漏服</label>
                                    </div>
                                    <div class="missed-reason mt-2" style="display: none;">
                                        <label>漏服原因</label>
                                        <select class="form-select" name="evening_missed_reason">
                                            <option value="外出">外出</option>
                                            <option value="拒服">拒服</option>
                                            <option value="其它">其它</option>
                                        </select>
                                        <input type="text" class="form-control mt-2" name="evening_missed_other" placeholder="请注明其它原因" style="display: none;">
                                    </div>
                                </div>

                                <div class="form-group mb-3">
                                    <label>不良反应</label>
                                    <select class="form-select" name="side_effects" required>
                                        <option value="无">无</option>
                                        <option value="皮疹">皮疹</option>
                                        <option value="腹泻">腹泻</option>
                                        <option value="便秘">便秘</option>
                                        <option value="排气增多">排气增多</option>
                                        <option value="其它">其它</option>
                                    </select>
                                    <input type="text" class="form-control mt-2" name="side_effects_other" placeholder="请注明其它不良反应" style="display: none;">
                                </div>
                            </div>

                            <!-- 所有用户必填部分 -->
                            <div class="form-group mb-3">
                                <label>康复训练时长</label>
                                <select class="form-select" name="training_duration" required>
                                    <option value="未训练">未训练</option>
                                    <option value="0.5小时内">0.5小时内</option>
                                    <option value="1小时内">1小时内</option>
                                    <option value="1.5小时内">1.5小时内</option>
                                    <option value="2小时内">2小时内</option>
                                    <option value="3小时或以上">3小时或以上</option>
                                </select>
                            </div>

                            <div class="form-group mb-3">
                                <label>孩子的进展</label>
                                <textarea class="form-control" name="progress" rows="3" placeholder="孩子在训练中的配合度、兴趣和进步情况"></textarea>
                            </div>
                        </div>

                        <!-- 高级选项部分 -->
                        <div class="advanced-options">

                            <div class="advanced-content" style="display: none;">
                                <div class="form-group mb-3">
                                    <label>大便情况</label>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <label class="form-label">次数</label>
                                            <input type="number" class="form-control" name="stool_times" min="0">
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">性状</label>
                                            <select class="form-select" name="stool_type">
                                                <option value="">请选择</option>
                                                <option value="正常">正常</option>
                                                <option value="干硬">干硬</option>
                                                <option value="稀软">稀软</option>
                                                <option value="水样">水样</option>
                                            </select>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">颜色</label>
                                            <select class="form-select" name="stool_color">
                                                <option value="">请选择</option>
                                                <option value="棕">棕</option>
                                                <option value="黄">黄</option>
                                                <option value="黑">黑</option>
                                                <option value="其它">其它</option>
                                            </select>
                                        </div>
                                    </div>
                                    <input type="text" class="form-control mt-2" name="stool_abnormal" placeholder="异常情况说明">
                                </div>

                                <div class="form-group mb-3">
                                    <label>三餐记录</label>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <label class="form-label">早餐</label>
                                            <textarea class="form-control" name="breakfast" rows="2"></textarea>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">午餐</label>
                                            <textarea class="form-control" name="lunch" rows="2"></textarea>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">晚餐</label>
                                            <textarea class="form-control" name="dinner" rows="2"></textarea>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group mb-3">
                                    <label>食欲变化情况</label>
                                    <select class="form-select" name="appetite">
                                        <option value="">请选择</option>
                                        <option value="无变化">无变化</option>
                                        <option value="增加">增加</option>
                                        <option value="减少">减少</option>
                                    </select>
                                    <input type="text" class="form-control mt-2" name="appetite_note" placeholder="变化情况说明">
                                </div>

                                <div class="form-group mb-3">
                                    <label>营养补充</label>
                                    <textarea class="form-control" name="supplements" rows="2" placeholder="非本试验的益生菌及营养素补充内容"></textarea>
                                </div>

                                <div class="form-group mb-3">
                                    <label>睡眠情况</label>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label class="form-label">时长（小时）</label>
                                            <input type="number" class="form-control" name="sleep_duration" min="0" max="24" step="0.5">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">质量</label>
                                            <select class="form-select" name="sleep_quality">
                                                <option value="">请选择</option>
                                                <option value="好">好</option>
                                                <option value="中">中</option>
                                                <option value="差">差</option>
                                            </select>
                                        </div>
                                    </div>
                                    <input type="text" class="form-control mt-2" name="sleep_note" placeholder="异常情况说明">
                                </div>

                                <div class="form-group mb-3">
                                    <label>重大环境变化</label>
                                    <textarea class="form-control" name="environment_changes" rows="2"></textarea>
                                </div>

                                <div class="form-group mb-3">
                                    <label>今日心得小结</label>
                                    <textarea class="form-control" name="summary" rows="3"></textarea>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <div class="advanced-toggle">
                        <button type="button" class="btn btn-outline-primary" onclick="toggleAdvancedOptions()">
                            <i class="fas fa-chevron-down"></i> 更多可选内容
                        </button>
                    </div>
                    <div class="action-buttons">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" onclick="saveDiary()">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加历史日记详情模态框 -->
    <div class="modal fade" id="diaryDetailModal" tabindex="-1" aria-labelledby="diaryDetailModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="diaryDetailModalLabel">航程日记详情</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="diary-detail-content">
                        <!-- 日记详细内容将通过JavaScript动态填充 -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加用户信息模态框 -->
    <div class="modal fade" id="userInfoModal" tabindex="-1" aria-labelledby="userInfoModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="userInfoModalLabel">星际探索者信息</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <ul class="user-info-list">
                        <li>
                            <span class="label">试验编号</span>
                            <span class="value">BCH2501</span>
                        </li>
                        <li>
                            <span class="label">分组类型</span>
                            <span class="value" id="userInfoGroupType"></span>
                        </li>
                        <li>
                            <span class="label">分组编号</span>
                            <span class="value" id="userInfoGroupNo"></span>
                        </li>
                        <li>
                            <span class="label">用户UID</span>
                            <span class="value" id="userInfoUID"></span>
                        </li>
                        <li>
                            <span class="label">受试编号</span>
                            <span class="value" id="userInfoSubjectNo"></span>
                        </li>
                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 将所有JS文件移到这里，并添加defer属性 -->
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js" defer></script>
    <script src="/apps/js/bootstrap.bundle.min.js" defer></script>
    <script src="/apps/js/wx-client-dom.js" defer></script>

    <script src="/apps/public/space-journey/js/game.js" defer></script>

    <!-- 滚动问题修复脚本 -->
    <script>
        // 检测是否在微信浏览器中
        function isWeixinBrowser() {
            var ua = navigator.userAgent.toLowerCase();
            return /micromessenger/i.test(ua);
        }

        // 检测是否在桌面版微信中
        function isDesktopWeixin() {
            var ua = navigator.userAgent.toLowerCase();
            return isWeixinBrowser() && /windowswechat|wechat.*windows/i.test(ua);
        }

        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 处理滚动问题
            function fixScrollIssues() {
                // 获取视口高度
                var viewportHeight = window.innerHeight;

                // 获取当前活动视图
                var activeView = document.querySelector('.game-view.active');
                if (!activeView) return;

                // 获取活动视图的实际高度
                var contentHeight = activeView.scrollHeight;

                // 如果内容高度大于视口高度，确保可以滚动
                if (contentHeight > viewportHeight) {
                    document.body.style.height = 'auto';
                    document.body.style.overflow = 'auto';
                    document.documentElement.style.height = 'auto';
                    document.documentElement.style.overflow = 'auto';

                    // 特别处理桌面版微信
                    if (isDesktopWeixin()) {
                        activeView.style.height = 'auto';
                        activeView.style.minHeight = contentHeight + 'px';
                        activeView.style.overflow = 'visible';

                        // 强制重新计算布局
                        setTimeout(function() {
                            window.scrollTo(0, 0);
                            document.body.style.display = 'none';
                            document.body.offsetHeight; // 触发重排
                            document.body.style.display = '';
                        }, 100);
                    }
                }
            }

            // 初始执行一次
            fixScrollIssues();

            // 窗口大小改变时再次执行
            window.addEventListener('resize', fixScrollIssues);

            // 视图切换时执行
            // 假设有一个函数用于切换视图，在该函数中调用 fixScrollIssues()

            // 对于Edge开发者模式下的Nest Hub等设备模拟器
            if (navigator.userAgent.indexOf('Edge') > -1 || navigator.userAgent.indexOf('Edg') > -1) {
                // 特殊处理Edge浏览器
                document.body.classList.add('edge-browser');
                document.documentElement.classList.add('edge-browser');
            }
        });
    </script>
</body>
</html> 
